/*
 * 客户权限开通设备账号
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-09 18:14:20
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-customer-device-account-create {
        min-height: 74vh;
    }
</style>
<template>
	<div class="v-customer-device-account-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="80"
					name="create__form">

					<Form-item
						:label="$t('device.account')"
						prop="account">
						<i-input
							v-model="formValidate.account"
							:placeholder="$t('device.please_enter_account')"
							name="create__account"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('device.password')"
						prop="password">
						<i-input
							v-if="!show_password"
							v-model="formValidate.password"
							:placeholder="$t('device.please_enter_password')"
							name="create__password"
							type="password"
							icon="eye"
							@on-click="showPassword()"/>
						<i-input
							v-else
							v-model="formValidate.password"
							:placeholder="$t('device.please_enter_password')"
							type="text"
							name="create__password"
							icon="eye"
							@on-click="showPassword()"/>
					</Form-item>

					<Form-item
						:label="$t('device.device_name')"
						prop="device_name">
						<i-input
							v-model="formValidate.device_name"
							:placeholder="$t('device.please_enter_device_name')"
							name="create__device_name"
							type="text"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							name="create__submit"
							@click="handleSubmit('formValidate')">
							{{ $t('common.confirm') }}
						</Button>
						<Button
							name="create__reset"
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

export default {
	name: 'DeviceAccountCreate',

	// props: ['stores'],

	data() {
		return {
			formValidate: {
				account: '',

				password: '',

				device_name: '',
			}, // 新建设备账号时的表单

			show_password: false,

			ruleValidate: { // 表单验证规则
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('device.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('device.password') }),
						trigger: 'blur,change',
					},
				],
				device_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('device.device_name') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {
		/**
         * 设备账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.formValidate);

					this.show_password = false;
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},
	},
};
</script>
